<template>
	<view>
		<block v-if="isload">
			<view class="navigation" :style="'top:' + topBtn + 'px'">
				<img :src="static_url + '/static/img/diylight_n1.png'" class="navigation_item" alt="" @tap="goback">
				<img :src="static_url + '/static/img/diylight_n2.png'" class="navigation_item" alt="" @tap="goto"
					:data-url="'/pages/shop/cart'">
				<img :src="static_url + '/static/img/diylight_n3.png'" class="navigation_item" alt=""
					@tap="uploadImg()">
				<img :src="static_url + '/static/img/diylight_n4.png'" class="navigation_item" alt="" @tap="draw">
				<button open-type="share" v-if="getplatform() == 'wx'" class="navigation_icon"><img
						:src="static_url + '/static/img/diylight_n5.png'" class="navigation_item" alt=""></button>
			</view>
			<view v-for="(item, index) in dataList" :key="index"
				:style="{ top: item.y - item.size / 2 + 'px', left: item.x - item.size / 2 + 'px', height: item.size + 'px', width: item.size + 'px', transform: 'rotate(' + item.rotate + 'deg)' }"
				class="move_module move_item" @click="moveClick(index)" :class="item.active ? 'move_active' : ''">
				<img :src="item.url[item.lightIndex]" class="move_image" alt="" @touchstart='siteStart($event, index)'
					@touchmove='siteMove($event, index)' @touchend='siteEnd($event, index)'>
				<view v-if="item.active" @touchstart='spinStart($event, index)' @touchmove='spinMove($event, index)'
					@touchend='spinEnd($event, index)' class="move_spin">
					<img :src="static_url + '/static/img/diylight_spin.png'" alt="">
				</view>
				<view v-if="item.active" class="move_close" @click="moveDelete(index)">
					<img :src="static_url + '/static/img/diylight_close.png'" alt="">
				</view>
				<view v-if="item.active" @touchstart='sizeStart($event, index)' @touchmove='sizeMove($event, index)'
					@touchend='sizeEnd($event, index)' class="move_size">
					<img :src="static_url + '/static/img/diylight_size.png'" alt="">
				</view>
			</view>
			<view class="table" :class="menuindex > -1 ? 'table_opt' : ''">
				<view @click="sceneClick" class="table_item">
					<img class="table_icon" :src="static_url + '/static/img/diylight_image.png'" alt="">更换场景
				</view>
				<view @click="lightClick" class="table_item">
					<img class="table_icon" :src="static_url + '/static/img/diylight_lamp.png'" alt="">选择灯具
				</view>
				<view v-if="switchState" @click="switchClick" class="table_item">
					<img class="table_icon" :src="static_url + '/static/img/diylight_closeL.png'" alt="">关灯
				</view>
				<view v-if="!switchState" @click="switchClick" class="table_item">
					<img class="table_icon" :src="static_url + '/static/img/diylight_openL.png'" alt="">开灯
				</view>
			</view>
			<view v-if="!switchState" class="page_cut"></view>
			<view v-if="sceneState" class="alert">
				<view @click="sceneClick" class="alert_hide"></view>
				<view class="alert_module" :class="menuindex > -1 ? 'alert_opt' : ''">
					<view class="alert_head">
						<view class="alert_btn" @tap="uploadImg">
							+上传场景
						</view>
						<img @click="sceneClick" class="alert_close"
							:src="static_url + '/static/img/diylight_closeA.png'" alt="">
					</view>
					<scroll-view scroll-y="true" class="alert_content" @scrolltolower="moreScene">
						<view v-for="(item, index) in sceneList" :key="index" v-if="sceneList.length"
							@click="sceneChoose(item)" class="alert_item">
							<img :src="item" mode="widthFix" alt="">
						</view>
						<nodata text="没有查找到相关商品" type='small' v-if="!sceneList.length"></nodata>
					</scroll-view>
				</view>
			</view>
			<view v-if="lightState" class="alert">
				<view @click="lightClick" class="alert_hide"></view>
				<view class="alert_module" :class="menuindex > -1 ? 'alert_opt' : ''">
					<view class="alert_title">
						<text>选择灯具</text>
						<img @click="lightClick" class="alert_close"
							:src="static_url + '/static/img/diylight_closeA.png'" alt="">
					</view>
					<scroll-view scroll-x="true" class="alert_table">
						<view v-for="(item, index) in tableList" :key="index" @click="tableClick(index)"
							:class="tableIndex == index ? 'alert_active' : ''">
							{{ item.name }}
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="alert_content" @scrolltolower="moreLight">
						<view v-for="(item, index) in lightList" :key="index" @click="lightChoose(item)"
							class="alert_item">
							<img :src="item.url[0]" mode="widthFix" alt="">
						</view>
						<nodata text="没有查找到相关商品" type='small' v-if="!lightList.length"></nodata>
					</scroll-view>
				</view>
			</view>
			<img class="scene" @click="areaClick" :src="scene" mode="widthFix" alt="">
			<scroll-view scroll-x="true" v-for="(item, index) in dataList" wx:key="index" v-if="item.active"
				class="class" :class="menuindex > -1 ? 'class_opt' : ''">
				<img v-for="(itemS, indexS) in item.url" wx:key="indexS" :src="itemS" @click="lightType(index, indexS)"
					:class="item.lightIndex == indexS ? 'class_item class_active' : 'class_item'" alt="" />
			</scroll-view>
			<view class="cart" v-for="(item, index) in dataList" wx:key="index" :style="'top:' + topCart + 'px'"
				v-if="item.real" @tap="goto" :data-url="'/pages/shop/product?id=' + item.id">
				<img :src="item.realUrl" class="cart_item" alt="">
				<view class="cart_title">加购物车</view>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
		<canvas class="canvasDraw" v-if="canvasState" canvas-id="myCanvas" id="myCanvas"></canvas>
	</view>
</template>
<script>
var app = getApp();
export default {
	data() {
		return {
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			opt: {},
			loading: false,
			isload: true,
			menuindex: -1,

			scene: "",
			sceneHeight: "",
			sceneWidth: "",
			tableList: [],
			dataList: [],
			tableIndex: 0,
			switchState: true,
			sceneState: false,
			lightState: false,
			sceneList: [],
			lightList: [],
			changeStart: '',
			pagenum: 1,
			canvasState: false,
			topBtn: "",
			topCart: "",

			chaX: 0,
			chaY: 0,
			chaR: 0
		}
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getdata();
	},
	onReady() {
		this.topBtn = uni.getMenuButtonBoundingClientRect().top;
		this.topCart = uni.getMenuButtonBoundingClientRect().top + 40;
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	methods: {
		moreScene() {
			console.log("获取更多场景");
		},
		moreLight() {
			console.log("获取更多灯具");
			this.pagenum = this.pagenum + 1;
			this.getprolist();
		},
		draw() {
			if (!this.dataList.length) {
				uni.showModal({
					title: '提示',
					content: '请选择灯具图片',
					showCancel: false
				});
				return;
			}
			this.canvasState = true;
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			uni.getSystemInfo({
				success: (res) => {
					let heightPage = res.screenHeight || res.windowHeight;
					let widthPage = res.screenWidth || res.windowWidth;
					let scale = widthPage / this.sceneWidth;
					let back = res.path;
					let backTop = 0;
					let backHeight = this.sceneHeight * scale;
					if (heightPage > backHeight) {
						backTop = (heightPage - backHeight) / 2;
					} else {
						backTop = -((backHeight - heightPage) / 2);
					}
					var ctx = uni.createCanvasContext('myCanvas');
					ctx.drawImage(this.scene, 0, backTop, widthPage, backHeight);
					for (let i = 0; i < this.dataList.length; i++) {
						let itemSize = this.dataList[i].size;
						let rotateData = this.dataList[i].rotate % 360;
						ctx.translate(this.dataList[i].x, this.dataList[i].y);
						ctx.rotate(rotateData * Math.PI / 180);
						ctx.drawImage(this.dataList[i].currentUrl, -itemSize / 2, -itemSize / 2, itemSize,
							itemSize);
						ctx.rotate(-(rotateData * Math.PI / 180));
						ctx.translate(-(this.dataList[i].x), -(this.dataList[i].y));
					}
					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							x: 0,
							y: 0,
							width: widthPage,
							height: heightPage,
							destWidth: widthPage * 3,
							destHeight: heightPage * 3,
							success: (
								res
							) => {
								this.canvasState = false;
								uni.hideLoading();
								uni.getImageInfo({
									src: res.tempFilePath,
									success: (image) => {
										uni.saveImageToPhotosAlbum({
											filePath: image.path,
											success: () => {
												uni.showModal({
													title: '保存成功',
													content: '图片已成功保存到相册',
													showCancel: false
												});
											}
										});
									}
								});
							}
						}, this)
					})
				}
			});
		},
		getdata() {
			var that = this;
			that.loading = true;
			var id = this.opt.id ? this.opt.id : 0;
			app.get('Shop/diylight', {
				id: id
			}, function (res) {
				that.loading = false;
				if (res.status == 1) {
					that.sceneList = res.data.bgimgs;
					that.scene = res.data.bgimgs[0];
					uni.getImageInfo({
						src: that.scene,
						success: function (image) {
							that.scene = image.path;
							that.sceneHeight = image.height;
							that.sceneWidth = image.width;
						}
					});

					if (id && res.data.pro) {
						that.lightChoose(res.data.pro)
					}
					that.loaded();
				} else {
					app.alert(res.msg);
				}

			});
			app.get('Shop/category1', {}, function (res2) {
				if (res2.status == 1) {
					// that.info = res.info;
					that.tableList = res2.data;
					that.loaded();
					that.getprolist();
				} else {
					app.alert(res2.msg);
				}
			});
		},
		getprolist: function () {
			var that = this;
			var pagenum = that.pagenum;
			var cid = that.tableList[that.tableIndex]['id'];
			that.loading = true;
			that.nodata = false;
			that.nomore = false;
			app.post('Shop/getprolistForLight', {
				pagenum: pagenum,
				cid: cid
			}, function (res) {
				that.loading = false;
				var data = res.data;
				if (pagenum == 1) {
					that.lightList = [];
					setTimeout(() => {
						that.lightList = data;
						if (data.length == 0) {
							that.nodata = true;
						}
					}, 10)
				} else {
					if (data.length == 0) {
						that.nomore = true;
					} else {
						var datalist = that.lightList;
						var newdata = datalist.concat(data);
						that.lightList = newdata;
					}
				}
			});
		},
		uploadImg: function () {
			var that = this;
			app.chooseImage(function (urls) {
				var imgurl = urls[0];
				app.post('Shop/diylightUpload', {
					imgurl: imgurl
				}, function (res) {
					that.loading = false;
					if (res.status == 1) {
						var datalist = that.sceneList;
						var newdata = urls.concat(datalist);
						that.sceneList = newdata;
						that.scene = imgurl;
						uni.getImageInfo({
							src: imgurl,
							success: function (image) {
								that.scene = image.path;
								that.sceneHeight = image.height;
								that.sceneWidth = image.width;
							}
						});
					} else {
						app.alert(res.msg);
					}
				});
			}, 1)
		},
		lightType(index, indexS) {
			this.dataList[index].currentUrl = this.dataList[index].url[indexS];
			this.dataList[index].lightIndex = indexS
			uni.getImageInfo({
				src: this.dataList[index].url[indexS],
				success: (res) => {
					this.dataList[index].currentUrl = res.path
				}
			});
		},
		areaClick() {
			for (let i = 0; i < this.dataList.length; i++) {
				this.dataList[i].active = false
			}
		},
		moveClick(index) {
			this.changeFocus(index)
			this.changeReal(index)
		},
		changeFocus(index) {
			for (let i = 0; i < this.dataList.length; i++) {
				if (this.dataList[i]) {
					this.dataList[i].active = false
				}
			}
			if (this.dataList[index]) {
				this.dataList[index].active = true
			}
		},
		changeReal(index) {
			for (let i = 0; i < this.dataList.length; i++) {
				if (this.dataList[i]) {
					this.dataList[i].real = false
				}
			}
			if (this.dataList[index]) {
				this.dataList[index].real = true
			}
		},
		lightChoose(e) {
			let item = {
				id: e.id,
				x: 200,
				y: 200,
				size: 100,
				url: e.url,
				realUrl: e.realUrl,
				rotate: 0,
				active: true,
				real: true,
				lightIndex: 0,
				currentUrl: ''
			}
			this.dataList.push(item)
			this.lightClose()
			this.changeReal(this.dataList.length - 1)
			this.changeFocus(this.dataList.length - 1)
			uni.getImageInfo({
				src: e.url[0],
				success: (res) => {
					this.dataList[this.dataList.length - 1].currentUrl = res.path;
				}
			});
		},
		tableClick(e) {
			var oldindex = this.tableIndex;
			this.pagenum = 1;
			this.tableIndex = e;
			if (e != oldindex)
				this.getprolist();
		},
		lightClick() {
			if (this.lightState) {
				this.lightState = false;
			} else {
				this.lightState = true;
			}
		},
		lightClose() {
			this.lightState = false;
		},
		sceneChoose(e) {
			this.scene = e;
			uni.getImageInfo({
				src: e,
				success: (image) => {
					this.scene = image.path;
					this.sceneHeight = image.height;
					this.sceneWidth = image.width;
				}
			});
			this.sceneClick()
		},
		sceneClick() {
			if (!app.globalData.mid) {
				var frompage = encodeURIComponent(app._fullurl());
				app.goto('/pages/index/login?frompage=' + frompage, 'reLaunch');
			}
			if (this.sceneState) {
				this.sceneState = false;
			} else {
				this.sceneState = true;
			}
		},
		switchClick() {
			if (this.switchState) {
				this.switchState = false;
			} else {
				this.switchState = true;
			}
		},
		siteStart(event, index) {
			this.changeFocus(index)
			var tranX = event.touches[0].pageX - this.dataList[index].x;
			var tranY = event.touches[0].pageY - this.dataList[index].y;

			this.chaX = tranX;
			this.chaY = tranY;
		},
		siteMove(event, index) {
			this.dataList[index].x = event.touches[0].clientX - this.chaX;
			this.dataList[index].y = event.touches[0].clientY - this.chaY;
		},
		siteEnd(event, index) { },
		sizeStart(event, index) { },
		sizeMove(event, index) {
			let sizeX = this.dataList[index].x;
			let sizeY = this.dataList[index].y;
			let pageX = event.touches[0].clientX;
			let pageY = event.touches[0].clientY;
			let cutX = pageX - sizeX;
			let cutY = pageY - sizeY;
			if (cutX > 0 && cutY > 0) {
				this.dataList[index].size = (event.touches[0].clientX - this.dataList[index].x) + (event.touches[0].clientY - this.dataList[index].y)
			}
			if (cutX < 0 && cutY < 0) {
				this.dataList[index].size = (this.dataList[index].x - event.touches[0].clientX) + (this.dataList[index].y - event.touches[0].clientY)
			}
			if (cutX < 0 && cutY > 0) {
				this.dataList[index].size = (this.dataList[index].x - event.touches[0].clientX) + (event.touches[0].clientY - this.dataList[index].y)
			}
			if (cutX > 0 && cutY < 0) {
				this.dataList[index].size = (event.touches[0].clientX - this.dataList[index].x) + (this.dataList[index].y - event.touches[0].clientY)
			}
		},
		sizeEnd(event, index) { },
		spinStart(event, index) {
			let centerx = this.dataList[index].size / 2 + this.dataList[index].x;
			let centery = this.dataList[index].size / 2 + this.dataList[index].y;
			let endx = event.touches[0].pageX;
			let endy = event.touches[0].pageY;
			this.chaR = this.getAngle(centerx, centery, endx, endy) - this.dataList[index].rotate;
		},
		spinMove(event, index) {
			let centerx = this.dataList[index].size / 2 + this.dataList[index].x;
			let centery = this.dataList[index].size / 2 + this.dataList[index].y;
			let endx = event.touches[0].pageX;
			let endy = event.touches[0].pageY;
			let rotate = this.getAngle(centerx, centery, endx, endy) - this.chaR;
			this.dataList[index].rotate = rotate;
		},
		getAngle(centerx, centery, endx, endy) {
			var diff_x = endx - centerx,
				diff_y = endy - centery
			var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI)
			c = c <= -90 ? (360 + c) : c
			return c + 90
		},
		spinEnd(event, index) { },
		moveDelete(e) {
			this.dataList.splice(e, 1);
			setTimeout(() => {
				if (this.dataList.length > 0) {
					let have = ''
					for (let i = 0; i < this.dataList.length; i++) {
						if (this.dataList[i].real) {
							have = i
						}
					}
					if (have == '') {
						let index = 0;
						this.dataList[index].real = true
						this.dataList[index].active = true
					}
				}
			}, 10)
		},
		onChange: function (event, index) {
			this.changeFocus(index)
			this.dataList[index].x = event.detail.x
			this.dataList[index].y = event.detail.y
		}
	}
}
</script>

<style>
page {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.scene {
	position: absolute;
	left: -100%;
	right: -100%;
	bottom: -100%;
	top: -100%;
	display: block;
	width: 100%;
	margin: auto auto;
}

movable-area {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.move_module {
	position: absolute;
	z-index: 5;
}

.move_item {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 2px dashed rgba(0, 0, 0, 0);
}

.move_active {
	border: 2px dashed #fff;
}

.move_image {
	position: absolute;
	height: 100%;
	width: 100%;
}

.move_spin {
	position: absolute;
	height: 40rpx;
	width: 40rpx;
	top: -20rpx;
	right: -20rpx;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #666;
}

.move_spin img {
	height: 30rpx;
	width: 30rpx;
	display: block;
}

.move_close {
	position: absolute;
	height: 40rpx;
	width: 40rpx;
	left: -20rpx;
	bottom: -20rpx;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #666;
}

.move_close img {
	height: 30rpx;
	width: 30rpx;
	display: block;
}

.move_size {
	position: absolute;
	height: 40rpx;
	width: 40rpx;
	right: -20rpx;
	bottom: -20rpx;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #666;
}

.move_size img {
	height: 30rpx;
	width: 30rpx;
	transform: rotate(90deg);
	display: block;
}

.class {
	position: absolute;
	width: 100%;
	padding: 0 50rpx;
	bottom: 100rpx;
	white-space: nowrap;
	align-items: center;
}

.class_item {
	height: 110rpx;
	width: 110rpx;
	display: inline-block;
	border-radius: 10rpx;
	margin-right: 20rpx;
	border: 2px solid rgba(0, 0, 0, 0);
}

.class_active {
	border: 2px solid #e8506f;
}

.class_opt {
	bottom: calc(env(safe-area-inset-bottom) + 230rpx);
}

.cart {
	position: absolute;
	left: 50rpx;
}

.cart_item {
	height: 110rpx;
	width: 110rpx;
	border-radius: 10rpx;
	border: 2px solid #e8506f;
}

.cart_title {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	margin: 5rpx 0 0 0;
}

.navigation {
	position: absolute;
	padding: 10rpx 30rpx;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	z-index: 10;
}

.navigation_item {
	margin-right: 30rpx;
	width: 50rpx;
	height: 50rpx;
}

.navigation_icon {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	background: rgba(0, 0, 0, 0) !important;
}

.table {
	position: fixed;
	bottom: 0;
	height: 80rpx;
	width: 100%;
	font-size: 26rpx;
	color: #a9a19e;
	display: flex;
	align-items: center;
	z-index: 10;
	background: rgba(0, 0, 0, 0.7);
}

.table_opt {
	bottom: calc(env(safe-area-inset-bottom) + 110rpx);
}

.table_item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.table_icon {
	height: 50rpx;
	width: 50rpx;
	margin-right: 15rpx;
}

.page_cut {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 5;
	background: rgba(0, 0, 0, 0.3);
}

.alert {
	position: fixed;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 15;
}

.alert_hide {
	position: absolute;
	height: 100%;
	width: 100%;
}

.alert_module {
	position: absolute;
	padding: 30rpx;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	bottom: 0;
	border-radius: 18rpx 18rpx 0 0;
}

.alert_opt {
	bottom: 110rpx;
}

.alert_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.alert_btn {
	position: relative;
	height: 60rpx;
	width: 180rpx;
	border: 1px solid #65c498;
	color: #65c498;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100rpx;
	background: rgba(104, 196, 153, 0.15);
}

.alert_close {
	height: 40rpx;
	width: 40rpx;
}

.alert_content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	white-space: normal;
	max-height: 450rpx;
	padding-top: 30rpx;
}

.alert_item {
	position: relative;
	width: 30%;
	height: 200rpx;
	margin-right: 5%;
	margin-bottom: 30rpx;
	overflow: hidden;
	display: inline-block;
}

.alert_item:nth-child(3n) {
	margin-right: 0;
}

.alert_item img {
	position: absolute;
	left: -100%;
	right: -100%;
	bottom: -100%;
	top: -100%;
	display: block;
	width: 100%;
	margin: auto auto;
}

.alert_title {
	position: relative;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #333;
}

.alert_table {
	position: relative;
	padding: 30rpx 0 0 0;
	white-space: nowrap;
}

.alert_table view {
	position: relative;
	padding-right: 30rpx;
	font-size: 28rpx;
	display: inline-block;
}

.alert_active {
	color: #e0110a;
	font-weight: bold;
}

.canvasDraw {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
}
</style>
